<template>
  <div >
<van-nav-bar
  :title="subject+'模拟考试'"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  class="NavBar"
/>
</div>
<div class="background">
 <div class="card">
 <div class="nei-biao">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="sculpture">
    <p>{{ userName }}</p>
    <div @click="show = true">{{ date ? '距离考试时间还有' + kday +'天': '请选择考试日期'}}</div>
</div>

<div class="shu">
      <p>{{ num }}</p>
      <p>{{ pass }}</p>
      <p>{{ avg }}</p>
    </div>

    <div class="zi">
      <p>考试次数</p>
      <p>合格次数</p>
      <p>平均分</p>
    </div>

    <div class="btn">
    <van-button round type="success" color="#0AB2FB" block style="width: 200px;" @click="$router.push('/cp/'+id)">开始考试</van-button>
    </div>
</div>

<van-calendar v-model:show="show" @confirm="onConfirm" />
</div>

</template>

<script setup>
import { createApp,ref,onMounted } from 'vue';
import { Image as VanImage,Calendar,Button} from 'vant';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import httpApi from '@/http';

const route = useRoute()
const store = useStore()

let id = null
let subject = ''
const userName = store.state.user.user_name
const aid = route.params.id
if(aid==1){
  id = 2
  subject = '科目一'
}else {
  id = 6
  subject = '科目四'
}

const num = ref(0)
const pass = ref(0)
const avg = ref(0)
onMounted(()=>{
  let grade_subj = subject
  let userId = store.state.user.user_id
  httpApi.gradesApi.queryByUser({userId,grade_subj}).then(res=>{
    // console.log('查询成绩',res)
    let arr = res.data.data
    num.value = arr.length
    let sum = 0
    for(let i=0;i<arr.length;i++){
      sum = sum + arr[i].grade_num
      if(arr[i].grade_num>=60){
        pass.value += 1
      }
    }

    let x = sum/num.value||0
    if(num.value==0){
      avg.value = 0
    }else if(sum%num.value < num.value*0.005){
      avg.value = Math.floor(sum/num.value)
    }else if(sum*10%num.value < num.value*0.05){
      avg.value = x.toFixed(1)
    }else {
      avg.value = x.toFixed(2)
    }
    // console.log(x)
    // console.log(avg.value)

  })
})
const app = createApp();
const date = ref('');
const show = ref(false);
const onClickLeft = () => history.back();


const formatDate = (date) => `${date}`;
const kday=ref(0)
const onConfirm = (value) => {

      show.value = false;
      date.value = formatDate(value);
      console.log(new Date(date.value).getTime(),'aaa');
      console.log(date.value);
      const d =new Date(date.value).getTime() - new Date().getTime()//当前日期-指定时间
      const day = d / (24 * 60 * 60 * 1000)  //计算天数
      console.log(d) //打印时会存在小数，根据业务需求选择截取方式
      kday.value = Math.ceil(day)  //小数取整（+1）
      console.log(kday);
};


app.use(VanImage);
app.use(Calendar);
app.use(Button);


</script>

<style lang="scss" scoped>
.sculpture {
width: 3rem;
height: 3rem;
border-radius: 50%;
}
.card {
width: 300px;
height: 400px;
border-radius: 2%;
background-color: rgba(255, 255, 255, 0.925);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.nei-biao>p {
font-size: 10px;
margin-left: 80px;
margin-top: -30px;
}
.nei-biao>div {
font-size: 12px;
margin-left: 80px;
}
.card img {
margin-top: 20px;
margin-left: 20px;
}
.background {
background-image: linear-gradient(hsla(184, 100%, 50%, 0.829), #d6ddd4);
height: 500px;
position: relative;
}
.van-cell {
padding: 0;
margin: 0;
}
.shu{
display: flex;
}
.shu>p {
font-size: 22px;
margin-top: 40px;
margin-left: 65px;
}
.zi{
display: flex;
}
.zi>p{
font-size: 14px;
margin-left: 35px;
margin-top: 10px;
margin-bottom: 100px;
}
.btn {
margin-left: 50px;
}
</style>